<template>
  <div class="home" style="height:100%;display:flex;">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <a-layout>
      <a-layout-header class="header">
        <div class="logo" />
      </a-layout-header>
      <a-layout id='mainlay' style="position:relative">
        <a-drawer style="position:absolute;" headerStyle='background:transparent' getContainer='#mainlay' :mask='false'
          :width="286" :placement="placement" :visible="visible" @close="onClose">
          <div class="menu">
            <a-layout-sider width="230" style="background: #fff;overflow-y: auto;margin:15px">
              <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
                :style="{ height: '100%', borderRight: 0 }">
                <a-sub-menu key="sub1">
                  <template #title>
                    <span>
                      <!-- <user-outlined /> -->
                      subnav 1
                    </span>
                  </template>
                  <a-menu-item key="1">option1</a-menu-item>
                  <a-menu-item key="2">option2</a-menu-item>
                  <a-menu-item key="3">option3</a-menu-item>
                  <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                  <template #title>
                    <span>
                      <!-- <laptop-outlined /> -->
                      subnav 2
                    </span>
                  </template>
                  <a-menu-item key="5">option5</a-menu-item>
                  <a-menu-item key="6">option6</a-menu-item>
                  <a-menu-item key="7">option7</a-menu-item>
                  <a-menu-item key="8">option8</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                  <template #title>
                    <span>
                      <notification-outlined />
                      subnav 3
                    </span>
                  </template>
                  <a-menu-item key="9">option9</a-menu-item>
                  <a-menu-item key="10">option10</a-menu-item>
                  <a-menu-item key="11">option11</a-menu-item>
                  <a-menu-item key="12">option12</a-menu-item>
                </a-sub-menu>
              </a-menu>
            </a-layout-sider>
          </div>
           <div class="arrow arrow-right" @click="visible?onClose():showDrawer()">
           <i class="iconfont icon-zjt arrow-i" :class="visible?'':'arrow-i-xz'"></i>
        </div>
        </a-drawer>
        <div v-show="!visible" class="arrow arrow-left" @click="visible?onClose():showDrawer()">
          <i class="iconfont icon-zjt arrow-i" :class="visible?'':'arrow-i-xz'"></i>
        </div>
        <a-layout style="padding:0px;margin-left:0px">
          <a-layout-content :style="{ background: '', padding: '0px', margin: 0, minHeight: '280px',overflow:'auto' }">
            <iframe src="https://map.baidu.com/@12714462.918558294,3549591,12.54z"
              style="width:100%;height:100%"></iframe>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined
} from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined
  },
  setup() {
    const placement = ref('left')
    const visible = ref(true)
    const showDrawer = () => {
      visible.value = true
    }
    const onClose = () => {
      visible.value = false
    }
    return {
      selectedKeys1: ref(['2']),
      selectedKeys2: ref(['1']),
      collapsed: ref(false),
      openKeys: ref(['sub1']),
      //左侧抽屉
      placement,
      visible,
      showDrawer,
      onClose
    }
  }
})
</script>
<style scoped lang='scss'>
:deep(.ant-drawer-content) {
  background-color: transparent;
}
:deep(.ant-drawer-content-wrapper) {
  box-shadow: none !important;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 20%,
    transparent 80%,
    #fff 100%
  );
  // .arrow {
  //   width: 30px;
  //   height: 90px;
  //   background: #f00;
  //   border-radius: 0 5px 5px 0;
  //   position: absolute;
  //   right: 0;
  //   top: 50%;
  //   transform: translateY(-50%) translateX(50%);
  // }
}
.arrow {
  cursor: pointer;
  width: 22px;
  height: 70px;
  background: #fff;
  box-shadow: 3px 1px 5px -1px rgba(0, 0, 0, 0.1);
  border-radius: 0 8px 8px 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0px, -50%);
  // transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  &-right {
    transform: translate(260px, -50%);
  }
  &-left {
    transform: translate(0px, -50%);
  }
  &-i {
    transition: all 0.3s;
  }
  &-i-xz {
    transform: rotate(180deg);
  }
}
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
